<template>
  <Dialog
    class="enact-plan"
    v-model:visible="props.visible"
    :showImg="false"
    top="20vh"
    width="50%"
    :title="plusTitle"
  >
    <template #showImg>
      <img src="../../../assets/images/false.png" @click="hidenDia" alt="" />
    </template>
    <template #content>
      <div class="content">
        <el-form
          :model="formData"
          size="large"
          label-position="right"
          label-width="140px"
        >
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item label="设备名称：">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入设备名称"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="11">
              <el-form-item label="所属区域：">
                <el-select
                  v-model="formData.region"
                  placeholder="请选择所属区域"
                >
                  <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" />
                </el-select> </el-form-item
            ></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item label="所属变压器：">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入所属变压器"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="11">
              <el-form-item label="所属出线柜：">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入所属出线柜"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item label="主机编号：">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入主机编号"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="11">
              <el-form-item label="一级分类：">
                <el-select
                  v-model="formData.region"
                  placeholder="请输入一级分类"
                >
                  <el-option label="Zone one" value="shanghai" />
                  <el-option
                    label="Zone two"
                    value="beijing"
                  /> </el-select></el-form-item
            ></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item label="二级分类：">
                <el-select
                  v-model="formData.region"
                  placeholder="请输入二级分类"
                >
                  <el-option label="Zone one" value="shanghai" />
                  <el-option
                    label="Zone two"
                    value="beijing"
                  /> </el-select></el-form-item
            ></el-col>
            <el-col :span="11">
              <el-form-item label="表地址：">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入表地址"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
        </el-form>
      </div>
    </template>
    <template #footer>
      <div class="footer">
        <button @click="hidenDia" class="cancel">取消</button>
        <button @click="enactSubmit" class="submit">确定</button>
      </div>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watchEffect } from "vue";
let props = defineProps(["visible", "formData", "plusTitle"]);
let emit = defineEmits(["update:visible", "plusDialogSure"]);
const hidenDia = () => {
  emit("update:visible", false);
};
const enactSubmit = () => {
  emit("plusDialogSure");
};
</script>
<style lang="scss" scoped>
.enact-plan {
  .el-form {
    margin-top: 36px;
    padding-left: 40px;
  }
  img {
    width: 19px;
    height: 19px;
    cursor: pointer;
  }
  .footer {
    margin-top: 100px;
    display: flex;
    justify-content: center;
    margin-bottom: 61px;
    button {
      height: 51px;
      width: 119px;
      border-radius: 5px;
      font-size: 24px;
      font-weight: 500;
      color: #ffffff;
    }
    .cancel {
      background: #d73d32;
    }
    .submit {
      background: #0250f9;
      margin-left: 25px;
    }
  }
}
</style>
